<template>
  <div class="search-wrap">
    <div>
      <label for="text">文本：</label
      ><input
        v-model="text"
        type="text"
        id="text"
        placeholder="文本"
        aria-label="213"
        @change="onChange"
      />value:{{ text }}
    </div>
    <div>
      <label for="textarea">多行文本：</label>
      <textarea
        id="textarea"
        v-model="textarea"
        type="text"
        placeholder="多行文本"
      ></textarea
      >value:{{ textarea }}
    </div>
    <div>
      <!-- <label for="checkbox">复选器：{{ checkbox }}</label>
      <input
        v-model="checkbox"
        type="checkbox"
        id="checkbox"
        placeholder="复选器"
        value="123"
      /> -->
      <div>Checked names: {{ checkbox }}</div>

      <div @change="onChange">
        <input type="checkbox" id="jack" value="Jack" v-model="checkbox" />
        <label for="jack">Jack</label>

        <input type="checkbox" id="john" value="John" v-model="checkbox" />
        <label for="john">John</label>

        <input type="checkbox" id="mike" value="Mike" v-model="checkbox" />
        <label for="mike">Mike</label>
      </div>
    </div>
    <div>
      <div>Picked: {{ radio }}</div>

      <input type="radio" id="one" value="One" v-model="radio" />
      <label for="one">One</label>

      <input type="radio" id="two" value="Two" v-model="radio" />
      <label for="two">Two</label>
    </div>
    <div>
      <label for="select"> 选择器：{{ selected }}</label>
      <select id="select" v-model="selected" multiple>
        <option disabled value="">Please select one</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
    </div>
    <!-- <div>{{ a }}</div> -->
  </div>
</template>

<script setup lang="ts">
const text = ref();
const textarea = ref();
const checkbox = ref([]);
const radio = ref();
const selected = ref([]);
// const a = "xxx";
const onChange = (e: Event) => {
  console.log(e, e.target.value);
};
</script>

<style lang="scss" scoped>
.search-wrap {
  display: flex;
  flex-direction: column;
  text-align: left;
  & input {
    margin-bottom: 20px;
  }
}
</style>
